<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微信文章收集助手</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <!-- 头部 -->
    <header class="header">
      <h1>📑 文章收集助手</h1>
      <span class="count" id="articleCount">0 篇</span>
    </header>

    <!-- 添加按钮 -->
    <button class="btn btn-primary" id="addBtn">
      <span class="btn-icon">+</span>
      添加当前文章
    </button>

    <!-- 提示信息 -->
    <div class="tip" id="tip"></div>

    <!-- 文章列表 -->
    <div class="list-container">
      <div class="list-header">
        <span>已收集文章 (<span id="listCount">0</span>)</span>
        <button class="btn-text" id="clearAllBtn">清空全部</button>
      </div>
      <div class="list" id="articleList">
        <div class="empty-state" id="emptyState">
          <p>暂无文章</p>
          <p class="empty-hint">打开微信公众号文章页面，点击上方按钮添加</p>
        </div>
      </div>
    </div>

    <!-- 底部操作 -->
    <footer class="footer">
      <div class="export-filename">
        <label for="filenameInput">文件名</label>
        <div class="filename-input-wrapper">
          <input type="text" id="filenameInput" placeholder="微信文章">
          <span class="filename-suffix">.csv</span>
        </div>
      </div>
      <button class="btn btn-secondary" id="exportBtn">
        <span class="btn-icon">📥</span>
        导出 CSV
      </button>
    </footer>
  </div>

  <!-- 确认对话框 -->
  <div class="confirm-overlay" id="confirmOverlay" style="display: none;">
    <div class="confirm-dialog">
      <div class="confirm-title" id="confirmTitle">确认操作</div>
      <div class="confirm-message" id="confirmMessage">确定要执行此操作吗？</div>
      <div class="confirm-buttons">
        <button class="btn btn-secondary" id="confirmCancel">取消</button>
        <button class="btn btn-danger" id="confirmOk">确定</button>
      </div>
    </div>
  </div>

  <script src="popup.js"></script>
</body>
</html>

